@import "cssvars";

.session-form-hold{
  width: 100%;
  max-width: 480px; 
  margin: 0 auto;
}

.page-wrap {
  background-color:var(--bg1);
  height: 100vh;
  padding: 0;
}

.copyright-line {
  text-align: center;
  padding-top: 32px;
}

.copyright-txt {
    text-align: center;
    opacity:0.5;
    font-size:85%
}

.truecommand {
  text-align: center;
  cursor: pointer;
}
#truecommand-logo {
  height: 24px;
  top: 7px;
  position: relative;
  cursor: pointer;
}
.truecommand-txt {
  text-align: center;
  opacity:0.5;
  padding-left: 5px;
}

.ha-status-txt {
    text-align: center;
}

.copyright-txt a:link {
    color: #396f9d;
}

#signin_button {
    font-weight: 700;
}

.mat-card {
  background-color: var(--bg2);
  color: var(--fg2);
  padding:0 0 32px 0 !important;
}

.mat-card .mat-card-content > div{
  padding: 0;
}

.mat-card .mat-card-content > div.disconnected{
  padding:32px 32px 0;
}

.card-bottom {
  padding: 0 16px;
}

div.fake-icon{
  border-radius:50%;
  background-color: $fg2; //var(--fg2);
  color: $bg2; //var(--bg2);
  padding:2px 8px;
  float:left;
  margin:6px 12px 12px 0;
  font-weight:700;
}

#legacy-btn-wrapper{
  text-align:center;
  margin:0px 32px 0;
}

#legacy-btn-wrapper button.mat-button{
  font-weight:normal !important;
  opacity:0.75;
  background: rgba(0,0,0,0.4);
}

form {
  margin:32px 32px 0;
}

form > div {
  margin:8px 0;
}

form button{
  margin:16px 0 ;
}

.logo-wrapper {
  /*padding:76px 0;*/
  padding:20% 0;
  background-color: $bg2; //var(--bg2);
  position:relative;
}

.logo-wrapper img.logo-bg{
  position:absolute;
  z-index:1;
  opacity:0.75;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-bottom: solid 1px #000;
}

.logo-wrapper .logo{
  position:relative;
  z-index:2; 
  width: 256px;
  height: auto;
}

#full-logo {
  height: 40px;
  top: 14px;
  position: relative;
  cursor: pointer;
  margin-left: 5px;
}

@media ( max-width:600px ) {
  .page-wrap { 
     height: 100vh;
     width: 100vw;
     max-width: 100%;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     overflow-x: hidden;
  }

  .mat-card{
    top: 0;
    min-height: 100vh;
  }

  .card-bottom{
    padding: 0;
  }

  /* Not sure how to workaround browser bug. 
  *  Apparently 100vw is actually viewport width + scrollbar width
  *  if vertical scrollbar is present
  */
  .page-wrap > * { 
    max-width: 100%;
    width: 100%;
  }

  .session-progress {
    position: fixed;
    top: 0;
  }

  .logo-wrapper {
    padding: 20% 0;
  }
}
